import style from '../css/PatientRegistration.module.scss'
import { Form, Input, Select, Radio, DatePicker, Cascader, Button, Flex,  Space, Table, Modal, message } from 'antd'
import type { CascaderProps } from 'antd';
import { PlusCircleOutlined } from '@ant-design/icons';
import { TableProps } from 'antd/lib';
import { useEffect, useState } from 'react';
import React from 'react';
import { patientcard, patientcardinsert, patientcardlogoff, patientid, patientlistsinsert, patientupdate } from '../utils/request';
import { useNavigate, useSearchParams } from 'react-router';
import moment from 'moment';
import dayjs from 'dayjs'

function PatientRegistration() {
    const [form] = Form.useForm();
    const [formOne] = Form.useForm()
    const navigate = useNavigate()
    const [params] = useSearchParams()
    //点击编辑进来传递id请求该id数据以及就诊卡信息
    const geypatientinfo = () =>{
        patientid({
            id:params.get('id')
        }).then(res=>{
            console.log(res.data[0])
            const { address , hukouaddress , Medicalinsurance , birthDate} = res.data[0]
            form.setFieldsValue({...res.data[0],address:address.split(','),hukouaddress:hukouaddress?hukouaddress.split(','):'',Medicalinsurance:Medicalinsurance?Medicalinsurance:'',birthDate:birthDate?dayjs(birthDate, 'YYYY-MM-DD'):''});
        }).catch(err=>{
            console.log(err)
        })
        // 查询患者就诊卡信息
        patientcard({
            id: params.get('id')
        }).then(res => {
            console.log(res.data)
            setData(res.data)
        }).catch(err => {
            console.log(err)
        })
    }
    useEffect(()=>{
        if(params.get('id')){
            // 查询患者信息
            geypatientinfo()
        }
    },[params.get('id')])
    interface Option {
        value: string;
        label: string;
        children?: Option[];
    }
    const options: Option[] = [
        {
            value: '河北省',
            label: '河北省',
            children: [
                {
                    value: '石家庄市',
                    label: '石家庄市',
                    children: [
                        {
                            value: '长安区',
                            label: '长安区',
                        },
                        {
                            value: '桥西区',
                            label: '桥西区',
                        },
                        {
                            value: '新华区',
                            label: '新华区',
                        },
                    ],
                },
                {
                    value: '唐山市',
                    label: '唐山市',
                    children: [
                        {
                            value: '路南区',
                            label: '路南区',
                        },
                        {
                            value: '路北区',
                            label: '路北区',
                        },
                        {
                            value: '古冶区',
                            label: '古冶区',
                        },
                    ],
                },
            ],
        },
        {
            value: '浙江省',
            label: '浙江省',
            children: [
                {
                    value: '杭州市',
                    label: '杭州市',
                    children: [
                        {
                            value: '上城区',
                            label: '上城区',
                        },
                        {
                            value: '下城区',
                            label: '下城区',
                        },
                        {
                            value: '江干区',
                            label: '江干区',
                        },
                    ],
                },
                {
                    value: '宁波市',
                    label: '宁波市',
                    children: [
                        {
                            value: '海曙区',
                            label: '海曙区',
                        },
                        {
                            value: '江北区',
                            label: '江北区',
                        },
                        {
                            value: '北仑区',
                            label: '北仑区',
                        },
                    ],
                },
            ],
        },
        {
            value: '江苏省',
            label: '江苏省',
            children: [
                {
                    value: '南京市',
                    label: '南京市',
                    children: [
                        {
                            value: '玄武区',
                            label: '玄武区',
                        },
                        {
                            value: '秦淮区',
                            label: '秦淮区',
                        },
                        {
                            value: '建邺区',
                            label: '建邺区',
                        },
                    ],
                },
                {
                    value: '无锡市',
                    label: '无锡市',
                    children: [
                        {
                            value: '锡山区',
                            label: '锡山区',
                        },
                        {
                            value: '惠山区',
                            label: '惠山区',
                        },
                        {
                            value: '滨湖区',
                            label: '滨湖区',
                        },
                    ],
                },
                {
                    value: '徐州市',
                    label: '徐州市',
                    children: [
                        {
                            value: '鼓楼区',
                            label: '鼓楼区',
                        },
                        {
                            value: '云龙区',
                            label: '云龙区',
                        },
                    ],
                },
                {
                    value: '常州市',
                    label: '常州市',
                },
            ],
        },
        {
            value: '安徽省',
            label: '安徽省',
            children: [
                {
                    value: '合肥市',
                    label: '合肥市',
                    children: [
                        {
                            value: '瑶海区',
                            label: '瑶海区',
                        },
                        {
                            value: '庐阳区',
                            label: '庐阳区',
                        },
                        {
                            value: '蜀山区',
                            label: '蜀山区',
                        },
                    ],
                },
                {
                    value: '芜湖市',
                    label: '芜湖市',
                    children: [
                        {
                            value: '镜湖区',
                            label: '镜湖区',
                        },
                        {
                            value: '鸠江区',
                            label: '鸠江区',
                        },
                        {
                            value: '弋江区',
                            label: '弋江区',
                        },
                    ],
                },
                {
                    value: '蚌埠市',
                    label: '蚌埠市',
                    children: [
                        {
                            value: '龙子湖区',
                            label: '龙子湖区',
                        },
                        {
                            value: '蚌山区',
                            label: '蚌山区',
                        },
                        {
                            value: '禹会区',
                            label: '禹会区',
                        },
                    ],
                },
            ],
        },
        {
            value: '四川省',
            label: '四川省',
            children: [
                {
                    value: '成都市',
                    label: '成都市',
                    children: [
                        {
                            value: '锦江区',
                            label: '锦江区',
                        },
                        {
                            value: '青羊区',
                            label: '青羊区',
                        },
                        {
                            value: '金牛区',
                            label: '金牛区',
                        },
                        {
                            value: '武侯区',
                            label: '武侯区',
                        },
                        {
                            value: '成华区',
                            label: '成华区',
                        },
                        {
                            value: '龙泉驿区',
                            label: '龙泉驿区',
                        },
                        {
                            value: '青白江区',
                            label: '青白江区',
                        },
                        {
                            value: '新都区',
                            label: '新都区',
                        },
                        {
                            value: '温江区',
                            label: '温江区',
                        },
                        {
                            value: '双流区',
                            label: '双流区',
                        },
                        {
                            value: '郫都区',
                            label: '郫都区',
                        },
                        {
                            value: '新津区',
                            label: '新津区',
                        },
                    ],
                },
                {
                    value: '自贡市',
                    label: '自贡市',
                    children: [
                        {
                            value: '自流井区',
                            label: '自流井区',
                        },
                        {
                            value: '贡井区',
                            label: '贡井区',
                        },
                        {
                            value: '大安区',
                            label: '大安区',
                        },
                    ],
                },
                {
                    value: '攀枝花市',
                    label: '攀枝花市',
                    children: [
                        {
                            value: '东区',
                            label: '东区',
                        },
                        {
                            value: '西区',
                            label: '西区',
                        },
                        {
                            value: '仁和区',
                            label: '仁和区',
                        },
                    ],
                },
                {
                    value: '泸州市',
                    label: '泸州市',
                    children: [
                        {
                            value: '江阳区',
                            label: '江阳区',
                        },
                        {
                            value: '纳溪区',
                            label: '纳溪区',
                        },
                        {
                            value: '龙马潭区',
                            label: '龙马潭区',
                        },
                    ],
                },
                {
                    value: '德阳市',
                    label: '德阳市',
                    children: [
                        {
                            value: '旌阳区',
                            label: '旌阳区',
                        },
                        {
                            value: '罗江区',
                            label: '罗江区',
                        },
                    ],
                },
                {
                    value: '广元市',
                    label: '广元市',
                    children: [
                        {
                            value: '利州区',
                            label: '利州区',
                        },
                        {
                            value: '昭化区',
                            label: '昭化区',
                        },
                    ],
                },
            ],
        },
    ];
    const onChange: CascaderProps<Option>['onChange'] = (value) => {
        console.log(value);
    };
    // 编辑中的卡管理表格数据
    interface DataType {
        key: string;
        type: string;
        code: string;
        status: string;
        correlationtime: string;
        failuretime: string;
        note: string
    }

    const columns: TableProps<DataType>['columns'] = [
        {
            title: '卡类型',
            dataIndex: 'cardtype',
            key: 'cardtype',
        },
        {
            title: '卡号',
            dataIndex: 'card',
            key: 'card',
        },
        {
            title: '卡状态',
            dataIndex: 'status',
            key: 'status',
            render: (text) => (
                text == '绑定中' ?
                    <a style={{ color: '#00A76F' }}>{text}</a>
                    :
                    text == '已作废' ?
                        <a style={{ color: '#aaa' }}>{text}</a>
                        :
                        <a style={{ color: 'rgba(255, 100, 100, 0.996078431372549)' }}>{text}</a>
            ),
        },
        {
            title: '关联时间',
            key: 'correlationtime',
            dataIndex: 'correlationtime',
            render: (text) => (
                text ?
                    <span>{moment(text).format("YYYY-MM-DD  HH:mm:ss")}</span>
                    : ''
            )
        },
        {
            title: '失效时间',
            dataIndex: 'failuretime',
            key: 'failuretime',
            render: (text) => (
                text ?
                    <span>{moment(text).format("YYYY-MM-DD  HH:mm:ss")}</span>
                    : ''
            )
        },
        {
            title: '卡备注',
            dataIndex: 'cardnote',
            key: 'cardnote',
        },
        {
            title: '操作',
            key: 'action',
            render: ({status,patientCard_id}) => (
                status=='绑定中'?
                <Space size="middle">
                    <a onClick={()=>resportloss(patientCard_id)}>挂失</a>
                    <a onClick={()=>cancel(patientCard_id)}>作废</a>
                </Space>
                :
                ''
            ),
        },
    ];
    const [data,setData] = useState<DataType[]>([])
    //  读卡
    const readID = () => {
        console.log('读身份证')
        form.setFieldsValue({address:[ '四川省', '德阳市', '罗江区' ],birthDate:dayjs('2025-01-01T16:00:00.000Z', 'YYYY-MM-DD')});
    } 
    const insurance = () =>{
        console.log('读医保卡')
    }
    // 新建卡号
    const [isModalVisible, setIsModalVisible] = React.useState(false);
    const [confirmLoading, setConfirmLoading] = useState(false);
    const insertcard = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setConfirmLoading(true);
        setTimeout(() => {
            formOne.validateFields().then(values => {
                console.log('Validated values: ', values);
                patientcardinsert({
                    patient_id:params.get('id'),
                    ...values
                }).then(res=>{
                    console.log(res)
                    setData(res.data)
                }).catch(err=>{
                    console.log(err)
                })
                setIsModalVisible(false);
                console.log('确认')
                message.success('新建卡号成功')
            }).catch(info => {
                console.log('Validate Failed:', info);
            });
            setConfirmLoading(false);
        }, 2000);
            
    };

    const handleCancel = () => {
        setIsModalVisible(false);
        console.log('取消')
        message.warning('已取消操作')
    };

    // 挂失作废对话框
    const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);
    const [modalContent, setModalContent] = useState('Default content');
    const [logoffId,setLogoffId] = useState(0)
  
    // 挂失、作废确认逻辑
    const handleDeleteConfirm = () => {
        console.log('Deletion confirmed!');
        setIsDeleteModalVisible(false);
        if(modalContent=='挂失'){
            console.log('已挂失')
           
        }else{
            console.log('已作废')
        }
        // 模拟异步操作
        const loadingInstance = message.loading('Action in progress..', 0); // 0 表示不会自动关闭
        setTimeout(() => {
            patientcardlogoff({
                status:modalContent,
                id:logoffId
            }).then(res=>{
                console.log(res)
                setData(res.data)
            }).catch(err=>{
                console.log(err)
            })
            // 关闭加载中的提示
            loadingInstance();
            // 显示成功提示
            message.success(`${modalContent}操作成功！`);
        }, 2000); // 假设异步操作需要2秒
        
    };
    // 挂失、作废取消逻辑
    const handleDeleteCancel = () => {
        console.log('Deletion cancelled!');
        setIsDeleteModalVisible(false);
    };
    // 挂失
    const resportloss=(i: any)=>{
        setModalContent('挂失')
        setLogoffId(i)
        setIsDeleteModalVisible(true);
        
    }
    // 作废
    const cancel=(i: any)=>{
        setIsDeleteModalVisible(true);
        setModalContent('作废')
        setLogoffId(i)
    }
    // 去挂号
    const goregister=()=>{
        console.log('去挂号')
    }
    // 患者列表
    const goPatientList=()=>{
        console.log('患者列表')
        navigate('/index/patientmangent/PatientLists')

    }
    // 重置
    const reset=()=>{
        console.log('重置')
        form.resetFields();
    }
    // 保存
    const [loading,setLoading] = useState(false)
     const save=()=>{
        console.log('保存')
        setLoading(true)
        setTimeout(() => {
            form.validateFields().then(values => {
                console.log('Validated values: ', values);
                patientlistsinsert(values).then(res=>{
                    console.log(res)
                }).catch(err=>{
                    console.log(err)
                })
            }).catch(info => {
                console.log('Validate Failed:', info);
            });
            setLoading(false)
        }, 2000);
        
    }
    // 取消编辑
    const closeedit=()=>{
        console.log('取消编辑')
        geypatientinfo()
    }
    // 点击编辑进来得保存按钮
    const [editloading,setEditloading] = useState(false)
    const editsave=()=>{
        console.log('编辑保存')
        setEditloading(true)
        setTimeout(() => {
            form.validateFields().then(values => {
                patientupdate({
                    ...values,
                    id:params.get('id')
                }).then(res=>{
                    console.log(res.data.status)
                    if(res.data.status==200){
                        message.success('数据修改成功')
                        setEditloading(false)
                    }
                }).catch(err=>{
                    console.log(err)
                })
            }).catch(info => {
                console.log('Validate Failed:', info);
            })
        }, 2000);
    }
    return (
        <>
            {/* 新建卡号对话框 */}
            <Modal
                title={
                <div style={{ display: 'flex', alignItems: 'center' }}>
                    <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E8%AE%BE%E8%AE%A1%E7%BB%84%E4%BB%B6/u257.svg" alt="" />
                    <span style={{marginLeft:5}}>新建卡号</span>
                </div>
                }
                confirmLoading={confirmLoading}
                open={isModalVisible}
                onOk={handleOk}
                onCancel={handleCancel}
            >
                <Form
                    form={formOne}
                    style={{
                        marginTop: 20
                    }}
                >
                    <Form.Item className={style.itemstyle} rules={[{ required: true }]} label='卡类型' colon={false} name='cardtype'>
                        <Select
                            allowClear
                            style={{ width: 230, height: 32, borderRadius: 0 }}
                            placeholder='请选择'
                            options={[
                                { value: '电子就诊卡', label: '电子就诊卡' },
                                { value: '电子健康卡', label: '电子健康卡' },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item className={style.itemstyle} label='卡号' name='card'>
                        <Input placeholder='不填写则默认生成' style={{ width: 230, height: 32, borderRadius: 0 }}></Input>
                    </Form.Item>
                </Form>
            </Modal>
            {/* 注销挂失对话框 */}
            <Modal
            title={
                <div style={{ display: 'flex', alignItems: 'center' }}>
                    <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E6%82%A3%E8%80%85%E5%88%97%E8%A1%A8/u2571.svg" alt="" />
                    <span style={{marginLeft:5}}>确认要{modalContent}吗?</span>
                </div>
            }
            open={isDeleteModalVisible}
            onOk={handleDeleteConfirm}
            onCancel={handleDeleteCancel}
            okText="确认"
            cancelText="取消"
        >
        </Modal>              
            <div className={style.cardreading}>
                <div className={style.readId} onClick={()=>readID()}>
                    <div className={style.icon}>
                        <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E6%82%A3%E8%80%85%E7%99%BB%E8%AE%B0/u2020.svg" alt="" />
                        <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E6%82%A3%E8%80%85%E7%99%BB%E8%AE%B0/u2021.svg" alt="" />
                    </div>
                    <span style={{ color: '#0468FF' }}>读身份证</span>
                </div>
                <div className={style.readId} onClick={()=>insurance()}>
                    <div className={style.iconcard}>
                        <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E6%82%A3%E8%80%85%E7%99%BB%E8%AE%B0/u2028.svg" alt="" />
                        <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E6%82%A3%E8%80%85%E7%99%BB%E8%AE%B0/u2029.svg" alt="" />
                    </div>
                    <span style={{ color: '#FA6A1C' }}>读医保卡</span>
                </div>
            </div>
            <div className={style.basicInfo}>
                <div className={style.title}>基本信息</div>
                {/* 基本信息输入框 */}
                <div className={style.formbox}>
                    <Form
                        form={form}
                        style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap' }}
                        initialValues={{ sex: '男' }}
                    >
                        <Form.Item label="姓名" name='name' rules={[{
                            required: true
                        }]} className={style.itemstyle} colon={false}>
                            <Input allowClear style={{ width: 230, height: 32 }} />
                        </Form.Item>
                        <Form.Item label="性别" name='sex' rules={[{
                            required: true
                        }]} className={style.itemstyle} colon={false}>
                            <Radio.Group style={{ width: 135, height: 32 }} block options={[
                                { label: '男', value: '男' },
                                { label: '女', value: '女' },
                            ]} optionType="button" />
                        </Form.Item>
                        <Form.Item label="证件类型" name='IDtype' rules={[{required:true}]} className={style.itemstyle} colon={false}>
                            <Select
                                allowClear
                                placeholder='请选择'
                                style={{ width: 230, height: 32 }}
                                options={[
                                    { value: '居民身份证', label: '居民身份证' },
                                    { value: '港澳通行证', label: '港澳通行证' },
                                    { value: '台湾通行证', label: '台湾通行证' },
                                    { value: '护照', label: '护照' },
                                    { value: '军官证', label: '军官证' },
                                    { value: '驾驶证', label: '驾驶证' },
                                    { value: '其他', label: '其他' },
                                ]}
                            />
                        </Form.Item>
                        {/* 证件号 */}
                        <Form.Item label="证件号" name='Idcard' rules={[{required:true}]} className={style.itemstyle} colon={false}>
                            <Input placeholder='请输入' allowClear style={{ width: 230, height: 32 }} />
                        </Form.Item>
                        {/* 出生日期 */}
                        <Form.Item label="出生日期" name='birthDate' className={style.itemstyle} colon={false}>
                            <DatePicker placeholder='请输入' allowClear style={{ width: 230, height: 32 }} />
                        </Form.Item>
                        {/* 年龄 */}
                        <Form.Item label="年龄" name='age' rules={[{required:true}]} className={style.itemstyle} colon={false}>
                            <Input placeholder='请输入' allowClear style={{ width: 230, height: 32 }} />
                        </Form.Item>
                        {/* 国籍 */}
                        <Form.Item label="国籍" name='nationality' className={style.itemstyle} colon={false}>
                            <Input placeholder='请输入' allowClear style={{ width: 230, height: 32 }} />
                        </Form.Item>
                        {/* 民族 */}
                        <Form.Item label="民族" name='folk' className={style.itemstyle} colon={false}>
                            <Select
                                allowClear
                                placeholder='请选择'
                                style={{ width: 230, height: 32 }}
                                options={[
                                    { value: '汉族', label: '汉族' },
                                    { value: '苗族', label: '苗族' },
                                    { value: '藏族', label: '藏族' },
                                    { value: '新疆维吾尔族', label: '新疆维吾尔族' },
                                    { value: '傣族', label: '傣族' },
                                    { value: '土族', label: '土族' },
                                    { value: '回族', label: '回族' },
                                ]}
                            />
                        </Form.Item>
                        {/* 婚姻状况 */}
                        <Form.Item label="婚姻状况" name='maritalstatus' className={style.itemstyle} colon={false}>
                            <Select
                                allowClear
                                placeholder='请选择'
                                style={{ width: 230, height: 32 }}
                                options={[
                                    { value: '已婚', label: '已婚' },
                                    { value: '未婚', label: '未婚' },
                                    { value: '离异', label: '离异' },
                                    { value: '丧偶', label: '丧偶' },
                                ]}
                            />
                        </Form.Item>
                        {/* 职业 */}
                        <Form.Item label="职业" name='career' className={style.itemstyle} colon={false}>
                            <Input placeholder='请输入' allowClear style={{ width: 230, height: 32 }} />
                        </Form.Item>
                        {/* 联系电话 */}
                        <Form.Item label="联系电话" name='phone' rules={[{required:true}]} className={style.itemstyle} colon={false}>
                            <Input placeholder='请输入' allowClear style={{ width: 230, height: 32 }} />
                        </Form.Item>
                        {/* 电子邮箱 */}
                        <Form.Item label="电子邮箱" name='eMail' className={style.itemstyle} colon={false}>
                            <Input placeholder='请输入' allowClear style={{ width: 230, height: 32 }} />
                        </Form.Item>
                        {/* 现住地址 */}
                        <Form.Item label="现住地址" name="address" className={style.itemstyle} rules={[{required:true}]} colon={false}>
                            <Cascader options={options} onChange={onChange} placeholder="请选择" className={style.options} style={{ width: 230, height: 32 }} />
                        </Form.Item>
                        {/* 现住详细地址 */}
                        <Form.Item label="现住详细地址" rules={[{required:true}]} name='nowDetail' colon={false} className={style.detail}>
                            <Input placeholder='请输入' allowClear style={{ width: 398, height: 32 }} />
                        </Form.Item>
                        {/* 邮编 */}
                        <Form.Item label="邮编" name='nowzipcode' colon={false}>
                            <Input placeholder='请输入' allowClear style={{ width: 129, height: 32 }} />
                        </Form.Item>
                        {/* 户口地址 */}
                        <Form.Item label="户口地址" name="hukouaddress" className={style.itemstyle} colon={false}>
                            <Cascader options={options} onChange={onChange} placeholder="请选择" style={{ width: 230, height: 32 }} />
                        </Form.Item>
                        {/* 户口详细地址 */}
                        <Form.Item label="户口详细地址" name='nowhukouDetail' className={style.detail} colon={false}>
                            <Input placeholder='请输入' allowClear style={{ width: 398, height: 32 }} />
                        </Form.Item>
                        {/* 邮编 */}
                        <Form.Item label="邮编" name='hukoucode' colon={false}>
                            <Input placeholder='请输入' allowClear style={{ width: 129, height: 32 }} />
                        </Form.Item>
                    </Form>
                </div>
            </div>
            {/* 补充信息 */}
            <div className={style.SupplementaryInformation}>
                <div className={style.title}>补充信息</div>
                <div className={style.Supplementary}>
                    <Form
                        form={form}
                        // layout="inline"
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 18 }}
                        style={{ display: 'flex', justifyContent: 'space-between' }}
                    >
                        <Form.Item label="监护人关系" name='relotion' rules={[{ required: true , message:'请输入至少一位监护人信息'}]} colon={false}>
                            <Select
                                placeholder='请选中监护人关系'
                                className={style.itemstyle}
                                options={[
                                    { value: '父母', label: '父母' },
                                    { value: '子女', label: '子女' },
                                    { value: '亲属', label: '亲属' },
                                    { value: '朋友', label: '朋友', },
                                    { value: '其他', label: '其他', },
                                ]}
                            />
                        </Form.Item>
                        <Form.Item label="监护人" name='people' rules={[{ required: true , message:'请输入至少一位监护人信息'}]} colon={false}>
                            <Input className={style.itemstyle} placeholder='请输入' />
                        </Form.Item>
                        <Form.Item label="监护人电话" name='guardianshipphone' rules={[{ required: true , message:'请输入至少一位监护人信息'}]} colon={false}>
                            <Input className={style.itemstyle} placeholder='请输入' />
                        </Form.Item>
                    </Form>
                    <Form
                        form={form}
                        // layout="inline"
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 18 }}
                        style={{ display: 'flex', justifyContent: 'space-between' }}
                    >
                        <Form.Item label="监护人关系" name='relotion1' colon={false}>
                            <Select
                                placeholder='请选中监护人关系'
                                className={style.itemstyle}
                                options={[
                                    { value: '父母', label: '父母' },
                                    { value: '子女', label: '子女' },
                                    { value: '亲属', label: '亲属' },
                                    { value: '朋友', label: '朋友', },
                                    { value: '其他', label: '其他', },
                                ]}
                            />
                        </Form.Item>
                        <Form.Item label="监护人" name='people1' colon={false}>
                            <Input className={style.itemstyle} placeholder='请输入' />
                        </Form.Item>
                        <Form.Item label="监护人电话" name='guardianshipphone1' colon={false}>
                            <Input className={style.itemstyle} placeholder='请输入' />
                        </Form.Item>
                    </Form>
                    <Form
                        form={form}
                        // layout="inline"
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 18 }}
                        style={{ display: 'flex', justifyContent: 'space-between' }}
                    >
                        <Form.Item label="监护人关系" name='relotion2' colon={false}>
                            <Select
                                placeholder='请选中监护人关系'
                                className={style.itemstyle}
                                options={[
                                    { value: '父母', label: '父母' },
                                    { value: '子女', label: '子女' },
                                    { value: '亲属', label: '亲属' },
                                    { value: '朋友', label: '朋友', },
                                    { value: '其他', label: '其他', },
                                ]}
                            />
                        </Form.Item>
                        <Form.Item label="监护人" name='people2' colon={false}>
                            <Input className={style.itemstyle} placeholder='请输入' />
                        </Form.Item>
                        <Form.Item label="监护人电话" name='guardianshipphone2' colon={false}>
                            <Input className={style.itemstyle} placeholder='请输入' />
                        </Form.Item>
                    </Form>
                </div>
            </div>
            {/* 关联信息 */}
            <div className={style.RelatesInformation}>
                <div className={style.title}>关联信息</div>
                <div className={style.formbox}>
                    <Form
                        form={form}
                        style={{ display: 'flex', alignItems: 'center', height: '100%' }}
                    >
                        <Form.Item label="患者性质" name="Patientnature" className={style.itemstyle} rules={[{
                            required: true
                        }]} colon={false}>
                            <Select
                                allowClear
                                placeholder='请选择'
                                style={{ width: 230, height: 32, marginBottom: 0 }}
                                options={[
                                    { value: '自费', label: '自费' },
                                    { value: '职工医保', label: '职工医保' },
                                    { value: '居民医保', label: '居民医保' },
                                ]}
                            />
                        </Form.Item>
                        <Form.Item label="医保卡号" name='Medicalinsurance' className={style.itemstyle} colon={false}>
                            <Input placeholder='请输入' allowClear style={{ width: 230, height: 32 }} />
                        </Form.Item>
                    </Form>
                </div>
            </div>
            {/* 卡管理 */}
            <div className={params.get('id')?style.cardmanagement:style.hidden}>
                <Flex style={{width:'100%',height:50,padding:'0 20px',borderBottom:'1px solid rgba(242, 242, 242, 1)',boxSizing:'border-box'}} align='center' justify='space-between'>
                    <p className={style.title}>卡管理</p>
                    <Button onClick={()=>insertcard()} style={{width:103,height:32,borderRadius:0}} type="primary" icon={<PlusCircleOutlined />}>
                        新建卡号
                    </Button>
                </Flex>
                <div className={style.datalists}>
                    <Table<DataType>  columns={columns} pagination={false} dataSource={data} rowKey='patientCard_id' className={style.tabledata} />
                </div>
            </div>
            {/* 底部固定提交 */}
            <div className={params.get('id')?style.hidden:style.bottomFixed}>
                <div className={style.bottomleft}>
                    <div className={style.jumplists} onClick={()=>goregister()}>
                        <div className={style.imagesbox}>
                            <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E6%82%A3%E8%80%85%E7%99%BB%E8%AE%B0/u2356.svg" alt="" />
                            <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E6%82%A3%E8%80%85%E7%99%BB%E8%AE%B0/u2357.svg" alt="" />
                        </div>
                        <span className={style.text}>去挂号</span>
                    </div>
                    <img className={style.splite} src="https://cdn7.axureshop.com/demo2024/2321849/images/%E6%82%A3%E8%80%85%E7%99%BB%E8%AE%B0/u2364.svg" alt="" />
                    <div className={style.jumplists} onClick={()=>goPatientList()}>
                        <div className={style.patientlist}>
                            <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E6%82%A3%E8%80%85%E7%99%BB%E8%AE%B0/u2362.svg" alt="" />
                            <img src="https://cdn7.axureshop.com/demo2024/2321849/images/%E6%82%A3%E8%80%85%E7%99%BB%E8%AE%B0/u2361.svg" alt="" />
                        </div>
                        <span className={style.text}>患者列表</span>
                    </div>
                </div>
                <div className={style.bottomright}>
                    <Flex align='center' style={{ height: '100%' }}>
                        <Button className={style.defaule} onClick={()=>reset()}>重置</Button>
                        <Button type="primary" loading={loading} onClick={()=>save()} className={style.primary}>保存</Button>
                    </Flex>
                </div>
            </div>
            {/*患者列表点击编辑进来的底部固定 */}
            <div className={params.get('id')?style.editfixed:style.hidden}>
                <Button style={{
                    width:89,
                    height:32,
                    marginRight:10
                }} onClick={()=>closeedit()}>取消编辑</Button>
                <Button type="primary" loading={editloading} style={{height:32
                }} onClick={()=>editsave()}>保存</Button>
            </div>
            
        </>
    );
}

export default PatientRegistration;

